import React, { Component, Fragment } from 'react'
import Dialog from './Dialog'

export default class Warp extends Component {
    state = {
        flag: false,
        list: []
    }
    render() {
        const { flag, list } = this.state
        return (
            <div>
                <button onClick={() => {
                    this.setState({
                        flag: true
                    })
                }}>点我出现弹框</button>

                <Fragment>
                    {
                        flag? <Dialog acceptFlag = {(flag, list) => {
                            if (list) {
                                this.setState({
                                    list,
                                    flag
                                })
                            } else {
                                this.setState({
                                    flag
                                })
                            }
                            
                        }}/>: ""
                    }
                </Fragment>

                <ul>
                    {
                        list.map((item, index) => {
                            return <li key = { index}>
                                {
                                    item.flag? item.title: ""
                                }
                            </li>
                        })
                    }
                </ul>
            </div>
        )
    }
}
